<template>
 <div class="relative w-full h-full px-4 login-warp" :class="theme.mode">
    <span class="xl:hidden header absolute text-white top-4 left-4 -enter-x">
      <div class=" flex ">
        <img alt="logo" class="logo" src="@/assets/img/logo.png" />
        <span class="text-white ml-2 text-xl font-delay-700 truncate md:opacity-100">{{systemName}}</span>
      </div>
    </span>

    <div class="container relative h-full py-2 pt-15 mx-auto sm:px-10">
      <div class="flex h-full">
        <div class="hidden left min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
          <div class="-enter-x flex">
            <img alt="logo" class="logo" src="@/assets/img/logo.png" />
            <span class="title text-white ml-2 text-2xl font-delay-700 truncate md:opacity-100">{{systemName}}</span>
          </div>
          <div class="my-auto -enter-x">
            <img class="w-1/2 -mt-16 " src="@/assets/svg/login-box-bg.svg" />
            <div class="mt-10 font-delay-700 text-2xl text-white ">{{systemDesc}}</div>
            <div class="mt-0 font-medium  text-white">这里是简介</div>
          </div>
        </div>
        <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
          <div
            class="
              relative
              w-full
              px-5
              py-8
              mx-auto
              my-auto
              rounded-md
              shadow-md
              xl:ml-16 xl:bg-transparent
              sm:px-8
              xl:p-4 xl:shadow-none
              sm:w-3/4
              lg:w-2/4
              xl:w-auto
              enter-x
              login-form
            "
          >
            <a-form @submit="onSubmit" :form="form">
              <h1 class="mb-3 text-2xl font-bold text-center xl:text-3xl xl:text-left">登录</h1>
              <!-- <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
                <a-tab-pane tab="账户密码登录" key="1"> -->
                  <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
                  <a-form-item>
                    <a-input
                      autocomplete="autocomplete"
                      size="large"
                      placeholder="admin"
                      v-decorator="['username', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
                    >
                      <a-icon slot="prefix" type="user" />
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-input-password
                      size="large"
                      placeholder="123456"
                      autocomplete="autocomplete"
                      v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
                    >
                      <a-icon slot="prefix" type="lock" />
                    </a-input-password>
                  </a-form-item>
                  <a-row :gutter="5">
                    <a-col :span="16">
                      <a-form-item>
                        <a-input
                          v-decorator="['kaptcha',{rules: [{ required: true, message: '请输入验证码', whitespace: true}]}]"
                          size="large"
                          type="text"
                          placeholder="请输入验证码">
                          <a-icon slot="prefix" type="smile"/>
                        </a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8" style="text-align: right">
                      <img v-if="requestCodeSuccess" style="width:105px;height:35px;margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
                      <img v-else style="margin-top: 2px;" src="@/assets/img/checkcode.png" @click="handleChangeCheckCode"/>
                    </a-col>
                  </a-row>
                <!-- </a-tab-pane>
                <a-tab-pane tab="手机号登录" key="2">
                  <a-form-item>
                    <a-input size="large" placeholder="mobile number" >
                      <a-icon slot="prefix" type="mobile" />
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-row :gutter="8" style="margin: 0 -4px">
                      <a-col :span="16">
                        <a-input size="large" placeholder="captcha">
                          <a-icon slot="prefix" type="mail" />
                        </a-input>
                      </a-col>
                      <a-col :span="8" style="padding-left: 4px">
                        <a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
                      </a-col>
                    </a-row>
                  </a-form-item>
                </a-tab-pane>
              </a-tabs> -->
              <div>
                <a-checkbox :checked="true" >自动登录</a-checkbox>
                <!-- <router-link style="float: right;margin-left:10px;" to="/dashboard/workplace" >注册账户</router-link> -->
                <a style="float: right">忘记密码</a>
              </div>
              <a-form-item>
                <a-button :loading="logging" style="width: 100%;margin-top: 24px;" size="large" htmlType="submit" type="primary">登录</a-button>
              </a-form-item>
              <div>
                <!-- 其他登录方式 -->
                <!-- <a-icon class="icon" type="alipay-circle" />
                <a-icon class="icon" type="taobao-circle" />
                <a-icon class="icon" type="weibo-circle" /> -->

              </div>
            </a-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { KAPTCHA } from '@/services/api'
import { mapActions, mapState } from 'vuex'
import { timeFix } from '@/utils/util'
import { getAction } from '@/services/manage'
export default {
  name: 'Login',
  components: {
    // CommonLayout
  },
  data() {
    return {
      logging: false,
      error: '',
      form: this.$form.createForm(this),
      randCodeImage: '',
      requestCodeSuccess: false,
      currdatetime: ''
    }
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName
    },
    systemDesc() {
      return this.$store.state.setting.systemDesc
    },
    ...mapState('setting', ['theme'])
  },
  methods: {
    ...mapActions('account', ['Login']),
    onSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true
          const data = this.form.getFieldsValue()
          data.uuid = this.randCode
          this.Login(data).then(this.afterLogin).catch(error => {
            this.requestFailed(error)
          }).finally(() => {
            this.logging = false
          })
        }
      })
    },
    afterLogin(res) {
      this.logging = false
      if (res.code === 200) {
        this.loginSuccess()
      } else {
        this.error = res.message
      }
    },
    loginSuccess() {
      this.$router.push({ path: '/dashboard/analysis' }, () => {})
      this.$notification.success({
        message: '欢迎',
        description: `${timeFix()}，欢迎回来`
      })
    },
    handleChangeCheckCode() {
      this.currdatetime = new Date().getTime()
      getAction(KAPTCHA).then(res => {
        if (res.success) {
          this.randCodeImage = 'data:image/jpg;base64,' + res.result.image
          this.randCode = res.result.code
          this.requestCodeSuccess = true
        } else {
          this.$message.error(res.message)
          this.requestCodeSuccess = false
        }
      }).catch(() => {
        this.requestCodeSuccess = false
      })
    },
    requestFailed(err) {
      this.$notification[ 'error' ]({
        message: '登录失败',
        description: (err.data || {}).message || err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  },
  mounted() {
    this.handleChangeCheckCode()
  }
}
</script>
<style lang="less">
input:-webkit-autofill,
 input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 111111s;
  -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
}
.night{
  .ant-input, .ant-input-password{
    background-color: #232a3b !important;
    border: 1px solid #303030 !important;
  }
}
.header{
  .text-white{
    --tw-text-opacity: 1;
    color: rgba(255, 255, 254, var(--tw-text-opacity)) !important;
  }
}
</style>
<style lang="less" scoped>
.login-warp{
  @media (max-width: @screen-xl) {
    background-color: #293146;
    .login-form {
      background-color: #fff;
    }
  }
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background-image: url(~@/assets/svg/login-bg.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: '';
    @media (max-width: @screen-xl) {
      display: none;
    }
  }
}
.login-warp.night{
  background-color: #293146;
  &::before {
    background-image: url(~@/assets/svg/login-bg-dark.svg);
  }
  // .login-form{
  //   .ant-btn{
  //     color: #fff;
  //   }
  // }
}
.left {
  .title{
    font-size: 24px;
    font-weight: 600;
  }
  .logo{
    width:48px ;
  }
}
.header{
  // .title{
    // color:#fff ;
  // }
  // }

  .logo{
    width:32px;
    height:32px;
  }
}

</style>
